<template>
    <div>
        <div class="box">
            <div class="row">
                <span class="name">EZ8620</span>
                <span class="line"></span>
                <span class="des">2.6V~5.5V输入，3A输出小封装同步降压电源转换器</span>
            </div>
            <div class="flex justify-start relative mb-[24px]">
                <div class="info-item" v-for="item in itemList">
                    <div class="flex justify-between px-[16px] my-[16px]">
                        <span>
                            <span class="border"></span>
                            {{ item.title }}</span>
                        <img :src="pdf.src" alt="" class="w-[19px] h-[19px]">
                    </div>
                    <img :src="filePath.src" class="file-path" alt="">
                    <span class="more">查看更多(1)</span>
                </div>
            </div>
        </div>
        <div class="detail-box">

            <ul>
                <li v-for="(item, index) in detailTitList" @click="currentDetailTitle = index"
                    :class="{ 'active': currentDetailTitle == index }">
                    <span>{{ item.title }}</span>
                </li>
            </ul>
            <div class="flex" v-if="currentDetailTitle == 0">

                <div class="pt-[24px]">
                    <span class="detail-box-title">概览</span>
                    <ul class="detail-box-des">
                        <li v-for="(item, index) in detailDesTitList" :class="{ 'active': currentDetail == index }"
                            @click="currentDetail = index" class="cursor-pointer">{{ item.title }}</li>
                    </ul>
                    <ul class="detail-box-con" v-if="currentDetail == 0">
                        <li v-for="item in detailDesConList">
                            · {{ item.title }}</li>
                    </ul>
                    <ul class="detail-box-con" v-if="currentDetail == 2">
                        <li class="w-full flex params" v-for="item in detailParameter">
                            <span class="w-[50%] inline-block">{{ item.label }}</span>
                            <span class="w-[50%] inline-block">{{ item.value }}</span>

                        </li>
                    </ul>
                    <ul class="detail-box-con" v-if="currentDetail == 3">
                        <li class="w-full flex params" v-for="item in sizeList">
                            <span class="w-[33%] inline-block">{{ item.a1 }}</span>
                            <span class="w-[33%] inline-block">{{ item.a2 }}</span>
                            <span class="w-[33%] inline-block">{{ item.a3 }}</span>
                        </li>
                    </ul>


                    <div v-html="detailDetail" v-if="currentDetail == 1" class="mt-[16px]"></div>

                </div>




                <div class="w-[380px] relative mt-[80px] ml-[100px] shrink-0">
                    <button
                        class="w-[40px] h-[30px] bg-brown absolute right-[1px] top-[215px] z-10 op flex items-center justify-center">

                        <img :src="magnifier.src" alt="" class="w-[16px] h-[16px]">
                    </button>
                    <img :src="currentPic.src" alt="" class="h-[246px]">
                    <div class="flex w-full justify-around flex-nowrap mt-[10px]">
                        <img :src="pic.src" class="w-[118px] h-[76px] pic cursor-pointer" alt="" v-for="pic in bannerList"
                            @click="changeCurrent(pic)">
                    </div>
                </div>
            </div>
            <div class="pt-[24px]" v-if="currentDetailTitle == 1">
                <span class="detail-box-title">概览</span>
                <EvaluationKitList />
            </div>
            <div class="pt-[24px]" v-if="currentDetailTitle == 2">
                <span class="detail-box-title">参考资料</span>
                <ReferenceMaterial />
            </div>
            <div class="pt-[24px]" v-if="currentDetailTitle == 3">
                <span class="detail-box-title">设计资源</span>
                <DesignResources />
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import pdf from '@assets/pdf.png'
import filePath from '@assets/filePath.png'
import p1 from '@assets/组 109.png'
import p2 from '@assets/组 110.png'
import p3 from '@assets/组 122.png'
import magnifier from '@assets/magnifier.png'
import EvaluationKitList from '@components/evaluationKitList.vue'
import ReferenceMaterial from "@components/referenceMaterial.vue";
import DesignResources from "@components/designResources.vue";
const currentPic = ref(p1)
const currentDetail = ref(0)
const currentDetailTitle = ref(0)
const bannerList = [p1, p2, p3]
const changeCurrent = (pic) => {
    currentPic.value = pic
}

const itemList = [{
    title: '数据手册'
},
{
    title: '用户手册'
}
]
const detailTitList = [{
    title: '概览'
},
{
    title: '评估套件'
},
{
    title: '参考资料'
},
{
    title: '设计资源'
}

]
const detailDesTitList = [{
    title: '优势特点'
},
{
    title: '产品详情'
},
{
    title: '参数'
},
{
    title: '封装|引脚|尺寸'
}

]

const detailDesConList = [
    { title: '输入电压范围：2.6V~5.5V ' },
    { title: '输出电压范围：0.6V~4V ' },
    { title: '输出3A持续电流 ' },
    { title: '开关频率范围：3MHz ' },
    { title: '20mΩ和10mΩ的MOSFETs内阻 ' },
    { title: '支持100%占空比 ' },
    { title: '支持轻负载的省电模式' },
    { title: '0.6V±1%的参考基准电压 ' },
    { title: '（-40°C~125°C，全温度范围） ' },
    { title: '55μA的工作静态电流，有效延长电池寿命 ' },
    { title: '输出电压可调并带有PG功能 ' },
    { title: '-40°C~125°C工作温度范围 ' },
    { title: '6引脚-DFN封装 ' },
    { title: '1.5mmx1.5mm ' },
    { title: 'AEC-Q100，车规认证中' },


]
const detailDetail = `
<div>
    ES5030是一种微型3A同步降压DC/DC转换器。输入电压范围为2.6V至5.5V，ES5030为单通道3输出，输出电压范围为0.6V到4V的3A输出。拥有3MHz高开关频率和恒定导通时间（COT）控制架构，针对线路和负载能够实现非常快速的瞬态响应。<br />
ES5030支持脉冲频率模块化（PFM）操作，轻负载高效率，100%占空比操作，实现最低压降。ES5030有故障保护功能，包括过电压、过电流和过温保护。封装为6-lead 1.5mm×1.5mm DFN封装，为您提供最高功率密度的系统电源解决方案。
</div
`
const detailParameter = [
    { label: 'Vin (min) (V)', value: '2.6' },
    { label: 'Vin (max) (V)', value: '5.5' },
    { label: 'Vout (min) (V)', value: '0.6' },
    { label: 'Vout (max) (V)', value: '1.8' },
    { label: 'Iout (max) (A)', value: '3' },
    { label: 'Iq (typ) (mA)', value: '55' },
    { label: 'Switching frequency（kHz）', value: '2200' },
    { label: 'Operating temperature range（℃）', value: '-40to125' },
    { label: 'Control mode', value: 'Constant on-time （COT）,DCS-Control' },
    { label: 'Duty cycle (max) (%)', value: '55' },

]

const sizeList = [{
    a1: '0024A2',
    a2: '2.6',
    a3: '0.85mm1.5×1.5'
}]
</script>
<style lang="scss" scoped>
.params {
    border-bottom: 1px solid #D8D5D5;

    span {
        padding-left: 16px;
        box-sizing: border-box;
    }

    span:first-child {
        border-right: 1px solid #D8D5D5;
    }

    &:hover {
        span {
            border-bottom: unset;
            text-decoration: unset;
            color: #333;
        }
    }
}

ul {
    display: flex;
    justify-content: flex-start;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
}

li {
    padding: 23px 42px;
    color: #3D3D3D;
    font-size: 20px;
    font-weight: 500;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);

    &:hover,
    &.active {
        box-shadow: 0px 1px 2px 0px #712C2F;

        span {
            color: #712C2F;
            text-decoration: underline;
        }
    }
}

.op {
    border-bottom-right-radius: 4px;
}

.more {
    position: absolute;
    color: #fff;
    right: 15px;
    bottom: 15px;
    text-decoration: underline;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
}

.file-path {
    width: 250px;
    height: 76px;
    opacity: 1;
    position: absolute;
    bottom: 0;
    object-fit: none;
}

.border {
    width: 2px;
    height: 16px;
    opacity: 1;
    background: #712C2F;
    margin-right: 10px;
}

.info-item {
    width: 250px;
    height: 151px;
    opacity: 1;
    border: 1px solid #D8D5D5;
    margin-left: 20px;
    position: relative;
    border-radius: 2px 2px 0px 0px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    margin-top: 24px;
    margin-bottom: 24px;
}

.row {
    border-bottom: 1px solid #D8D5D5;
    height: 123px;
    display: flex;
    align-items: center;
}

.box {
    height: 324px;
    border-radius: 8px;
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.line {
    border: 0.5px solid #D8D5D5;
    height: 94px;
    display: inline-block;
    width: 1px;
    margin-left: 40px;
    margin-right: 40px;
}

.des {
    font-size: 30px;
    font-weight: normal;
}

.name {
    font-size: 40px;
    font-weight: 500;
    padding-left: 30px;

}

.detail-box {
    width: 100%;
    border-radius: 8px;
    opacity: 1;
    margin-top: 24px;
    background: #FFFFFF;
    overflow: hidden;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    padding: 16px;
    margin-bottom: 20px;

    &-con {
        box-shadow: unset;
        display: block;
        list-style-type: disc;

        li {
            list-style: circle;
            box-shadow: unset;
            display: block;
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 14px;
            color: #333333;
            font-weight: normal;
            padding-left: 10px;
        }
    }

    &-des {
        box-shadow: unset;
        border-bottom: 1px solid #D8D5D5;

        li {
            box-shadow: unset;
            color: #3D3D3D;
            font-size: 16px;
        }

        li.active {
            color: #712C2F;
            border-bottom: 1px solid #712C2F;

        }
    }

    &-title {
        font-size: 30px;
        font-weight: 500;
        color: #3D3D3D;
        padding-left: 17px;
        margin-top: 24px;

        &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 14px;
            opacity: 1;
            background: #712C2F;
            transform: translateX(-7px) translateY(-4px);
        }
    }

    .pic {
        border: 1px dashed #D8D5D5;
    }
}</style>